[iOS 10] SFSafariViewControllerのバーの色を変更できるようになりました

iOS 9まで

iOS 9までは以下のようにSFSafariViewControllerのViewプロパティのtintColorを設定することでバー（ツールバーなど）内のコントロールの色を変更することはできましたが、バーの色を変更するようなAPIは提供されていませんでした。

import UIKit
import SafariServices

class ViewController: UIViewController {

    @IBAction func didTapButton(sender: AnyObject) {
        let url = NSURL(string: "https://dev.classmethod.jp/author/kato-jun/")
        let vc = SFSafariViewController(URL: url!)

        // バー内のコントロールの色が変わる
        vc.view.tintColor = UIColor.redColor()

        presentViewController(vc, animated: true, completion: nil)
    }
}

実行結果

iOS 10から

iOS 10ではSFSafariViewControllerに以下のプロパティが追加されました。

• preferredBarTintColor
• preferredControlTintColor

これらのプロパティを設定することでバー内のコントロールの色に加え、バーの色も変更することができるようになりました。

ただし、Safariアプリの方でPrivate Browsing Modeが有効になっていると、これらのプロパティを設定しても反映されないのでご注意ください。

以下のサンプルコードでは、バーの色を黒、バー内のコントロールの色を赤に変更しています。

import UIKit
import SafariServices

class ViewController: UIViewController {

    @IBAction func didTapButton(_ sender: AnyObject) {
        let url = URL(string: "https://dev.classmethod.jp/author/kato-jun/")
        let vc = SFSafariViewController(url: url!)

        // バーの色が変わる
        vc.preferredBarTintColor = UIColor.black
        // バー内のコントロールの色が変わる
        vc.preferredControlTintColor = UIColor.red

        present(vc, animated: true)
    }

}

実行結果

ちなみに

試してわかったことですが、preferredBarTintColorの色に合わせてそれに合うようにプログレスの色も自動で変わるようです。

preferredBarTintColorが白（UIColor.white）の場合

preferredBarTintColorが黒（UIColor.black）の場合

まとめ

iOS 10でバーの色を変えられるようになったことでアプリのテーマカラーなどをSFSafariViewControllerにも設定できるようになりました。 そういった意味で、少しずつSFSafariViewControllerがアプリに組み込みやすくなってきたと思います。

参考

• iOS SDK Release Notes for iOS 10.0
• preferredBarTintColor
• preferredControlTintColor